<template>
  <base-page-view class-name="page-container">
    <view v-if="listLength" class="attention-list-container">
      <view v-for="(item, index) in list" :key="index" class="attention-list-item">
        <view class="user-pic" @click="toUserCenter(item)">
          <b-image width="88" height="88" is-head :src="item.head_img_url" mode="aspectFill" />
        </view>
        <view class="user-intro">
          <view class="title">{{ item.nick_name }}</view>
          <view class="line">
            <view class="time">粉丝{{ item.fans_num }}</view>
          </view>
        </view>
        <view class="attention-btn" @click="attentionOperator(item)">
          <view v-if="item.other_state === 1" class="attention-ned">已关注</view>
          <view v-if="item.other_state === 2" class="attention-les">+关注</view>
          <view v-if="item.other_state === 3" class="attention-ned">互相关注</view>
        </view>
      </view>
    </view>
    <base-list-state :list-length="listLength" :list-query="{page_no: listQuery.page_no, page_size: listQuery.page_size}" :list-state="listState" :list-empty="listEmpty" />
  </base-page-view>
</template>
<script>
import { debounce } from '@/utils/tools'
export default {
  components: {
  },
  props: {
  },
  data() {
    return {
      type: 'getMyFans',
      listQuery: {
        page_size: 20,
        page_no: 1
      },
      listState: {
        loading: true,
        more: true
      },
      listEmpty: { type: 'empty_list', text: '暂无数据' },
      // view_type: ~ 自营商品、2 ~ 素材圈、3~ 直播、4~碧划算、5~箱起
      list: []
    }
  },
  computed: {
    listLength() { // 由于微信小程序无法自动更新base-list-state组件,故采用computed
      return this.list.length
    }
  },
  onLoad(option) {
    this.type = option.type
    this.init()
  },
  onPullDownRefresh() {
    this.init()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 500)
  },
  onReachBottom: debounce(function() {
    this.loadMore()
  }, 500),
  methods: {
    init() {
      this.listQuery = {
        page_size: 20,
        page_no: 1
      }
      this.listState.loading = false
      this.listState.more = true
      this.list = []
      this._getRecommend()
      if (this.type === 'myAttention') {
        this.$setNavTitle('我的关注')
      }
    },
    toUserCenter(item) {
      this.$navigateTo(`/pagesMaterial/user-center/index?materialUserId=${item.user_id}`)
    },
    async _getRecommend(type) {
      if (this.listState.loading || !this.listState.more) return
      this.listState.loading = true

      const res = await this.$api.materialApi[this.type](this.listQuery)
      if (res.success) {
        if (this.listQuery.page_no === 1) {
          this.list = []
        }
        if (res.data && res.data.length < this.listQuery.page_size) {
          this.listState.more = false
        }
        this.list = this.list.concat(res.data)
      }
      this.listState.loading = false
      this.$emit('getCommendData', this.list.length > 0)
    },
    async attentionOperator(item) {
      const operatorType = item.other_state === 2 ? 1 : 0
      const res = await this.$api.materialApi.attentionOperator({
        operatorType,
        userId: item.user_id
      })
      if (res.success) {
        item.other_state = res.data.attentionStatus
        item.fans_num = res.data.fansNum
        uni.showToast({
          title: item.other_state === 2 ? '取消关注成功' : '关注成功',
          icon: 'none',
          duration: 2000
        })
      }
    },
    loadMore() {
      if (this.listState.loading || !this.listState.more) return
      this.listQuery.page_no++
      this._getRecommend()
    }
  }
}
</script>
<style lang="scss">
.attention-list-container{
  background-color: #fff;
  margin-top: 20rpx;
  padding: 20rpx 20rpx;
  .attention-list-item{
    display: flex;
    align-items: center;
    height: 146rpx;
    border-bottom: 1px solid $color-border;
    &:nth-last-child(1) {
      border-bottom: none;
    }
    .user-pic{
      flex: 0 0 88rpx;
      width: 88rpx;
      border-radius: 50%;
      overflow: hidden;
      image{
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
      }
    }
    .user-intro{
      flex: 1;
      margin-left: 25rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .title{
        width: 100%;
        height: 40rpx;
        margin-bottom: 6rpx;
        line-height: 40rpx;
        @include text-ellipsis-line(1);

      }
      .line{
        color: #999;
        display: flex;
        width: 100%;
        justify-content: space-between;
        .type{
          font-size: 28rpx;
        }
        .time{
          font-size: 24rpx;
        }
      }
    }
  }
  .attention-btn{
    width: 140rpx;
    height: 54rpx;
    line-height: 54rpx;
    text-align: center;
    font-size: 26rpx;
    .attention-ned{
      border-radius: 2px;
      border: 2rpx solid #ccc;
      color: #ccc;
    }
    .attention-les{
      border-radius: 2px;
      border: 2rpx solid #000;
      color: #000;
    }
  }
}
.loading-tip {
  text-align: center;
  color: #666;
  font-size: 24rpx;
  padding: 20rpx  0;
}
</style>
